<template>
	<view class="container">
		<view style="position: relative;z-index: 999;;background-color: #fff;border-radius:30rpx 30rpx 0 0 ;">
			<u-index-list :index-list="indexList">
				<template v-for="(item, index) in itemArr">
					<!-- #ifdef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<u-index-item>
						<!-- #ifndef APP-NVUE -->
						<u-index-anchor :text="indexList[index]"></u-index-anchor>
						<!-- #endif -->
						<view @click="btnClick(cell)" :style="{'color':active===cell?'red':'#000'}" class="list-cell"
							v-for="(cell, index) in item">
							{{cell}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
	</view>
</template>

<script>
	import dataJSON from './index.js'
	let province = []
	let citys = []
	dataJSON.forEach(item => {
		province.push(item.name)
		citys.push(item.citys)
	})
	console.log(province);
	export default {
		data() {
			return {
				indexList: province,
				itemArr: citys,
				active: ''
			}
		},

		methods: {
			btnClick(text) {
				console.log(text);
				this.active = text
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>